<template>
    <div ref="listBox">
        <a class="list-item" href="javascript:;" v-for="(item, index) in props.listData" :key="'list'+index">
            <div class="left">
                <el-tag size="small" type="info" v-if="item.tag === '寄售公告'">寄售公告</el-tag>
                <el-tag size="small" type="warning" v-else-if="item.tag === '空投公告'">空投公告</el-tag>
                <el-tag size="small" v-else-if="item.tag === '活动公告'">活动公告</el-tag>
                <el-tag size="small" type="info" v-else-if="item.tag === '上新公告'">上新公告</el-tag>
                <el-tag size="small" type="info" v-else-if="item.tag === '澄清公告'">澄清公告</el-tag>
                <el-tag size="small" type="info" v-else-if="item.tag === '平台公告'">平台公告</el-tag>
                <el-tag size="small" type="info" v-else-if="item.tag === 'iBox宇宙编年史'">iBox宇宙编年史</el-tag>
                <el-tag size="small" type="info" v-else-if="item.tag === '系统公告'">系统公告</el-tag>
                <el-tag size="small" type="danger" v-else-if="item.tag === '赋能公告'">赋能公告</el-tag>
                <el-tag size="small" type="success" v-else>合成公告</el-tag>
                <p class="left-title">{{ item.title }}</p>
            </div>
            <div class="time">{{ item.datetime }}</div>
        </a>
        <div class="no-more" v-show="props.isLoadAll">没有更多数据了～</div>
    </div>
</template>

<script setup lang='ts'>
import { ref, defineProps, defineEmits, onMounted } from 'vue';

// 从父组件接收的props
const props = defineProps(['listData', 'isLoadAll'])

// 从父组件接收的自定义事件
const emits = defineEmits(['moreNoticeData'])

// 包裹列表的dom元素
const listBox = ref<HTMLElement | null>(null)


onMounted(() => {
    let ele = listBox.value as HTMLElement;

    // 监听页面滚动实现懒加载
    window.onscroll = debounce(() => {
        // 当已获取所有数据则不再执行请求操作
        if (props.isLoadAll) {
            return;
        }
        // 滚动到距离电影列表内容底部一定值则开始请求新数据
        if (window.pageYOffset + window.innerHeight > ele?.scrollHeight) {
            console.log('开始加载新数据');
            // 触发自定义事件让父组件请求新数据
            emits('moreNoticeData');
        }
    }, 50)
})


// 防抖处理函数
const debounce = (fn: any, delay: number) => {
    let timer: any = null;
    return function () {
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        timer = setTimeout(() => {
            fn(...arguments);
        }, delay)
    }
}

</script>

<style lang='scss' scoped>
a {
    text-decoration: none;
    outline: none;
}

.list-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
    font-size: 16px;
    color: #5e697a;
    border-bottom: 1px solid #f1f0f7;
    padding: 30px 48px 30px 52px;

    .left {
        display: flex;
        align-items: center;

        .left-title {
            font-weight: 600;
            font-size: 16px;
            line-height: 22px;
            color: #000;
        }
    }

    .time {
        font-weight: 400;
        font-size: 14px;
        color: #999;
    }
}

.list-item:hover {
    background: #f2f8ff;
    color: #1649e0;

    .time {
        color: #1649e0;
    }
}

.no-more {
    padding: 30px 0;
    text-align: center;
}
</style>